import React, { useState } from 'react';
import { AntdBaseTable } from './TBaseTable';
import { Tooltip } from 'antd';
import { useTablePipeline } from 'ali-react-table';
import styles from './index.less';
import { FileSearchOutlined } from '#/utils/antdIcons.js';
import _ from 'lodash';

const BaseTable = (props: any) => {
  const {
    tableData,
    tableHeader = [],
    onSelected,
    editor,
    onPublic,
    toMonthRatio,
    recovery,
  } = props;
  const [selectItem, setSelectItem] = useState<any>({});
  const onClick = (record: any) => {
    if (selectItem?.title === record.title) {
      recovery();
      setSelectItem({});
      return;
    }
    onSelected(record);
    setSelectItem(record);
  };

  // 处理表头
  const getColumns = (columsValue: any[]) => {
    const columns: any[] = [];
    columns.push({
      name: '交易单元',
      align: 'center',
      code: 'title',
      width: 103,
      lock: true,
      render: (value: any, record: any) => {
        const temp = value || '-';
        return (
          <div className={styles.flexDiv}>
            <Tooltip title={value}>
              <span className={styles.autoTitle}>{temp}</span>
            </Tooltip>
            <FileSearchOutlined
              style={{ marginLeft: 5, color: 'var(--bd-primary)' }}
              onClick={() => {
                onClick(record);
              }}
            />
          </div>
        );
      },
    });
    const group = _.groupBy(columsValue, 'parentName');
    const parentNames: any[] = Object.keys(group);
    parentNames.forEach((item: string) => {
      columns.push({
        name: item,
        align: 'center',
        children: [],
      });
    });

    columns.map((colItem: any, index: number) => {
      const children: any[] = [];
      if (!index) return;
      columsValue.map((item: any) => {
        if (colItem.name == item.name) {
          columns[index] = {
            name: item.name,
            align: 'center',
            width: 90,
            code: item.field,
            features: {
              sortable: true,
            },
            render: (value: any) => {
              return value || '-';
            },
          };
        } else if (colItem.name == item.parentName) {
          children.push({
            name: item.name,
            align: 'center',
            width: 90,
            code: item.field,
            children: [],
            features: {
              sortable: true,
            },
            render: (value: any) => {
              return value || '-';
            },
          });
        }
      });
      columns[index].children = children;
    });
    columns.push({
      name: '操作',
      align: 'center',
      width: 170,
      lock: true,
      render: (value: any, record: any) => {
        if (!record.status.length) return '';
        return (
          <span>
            <span
              className={styles.custorm}
              onClick={() => {
                editor(record);
              }}
            >
              编辑
            </span>
            <span style={{ margin: '0 8px', color: 'var(--bd-a50)' }}>|</span>
            <span
              className={`${
                record.status.includes('0') || record.status.includes('2')
                  ? styles.custorm
                  : styles.disable
              }`}
              onClick={() => {
                (record.status.includes('0') || record.status.includes('2')) &&
                  onPublic(record.unitId);
              }}
            >
              发布
            </span>
            <span style={{ margin: '0 8px', color: 'var(--bd-a50)' }}>|</span>
            <span
              className={`${styles.custorm}`}
              onClick={() => {
                toMonthRatio(record);
              }}
            >
              月度分解比例
            </span>
          </span>
        );
      },
    });
    return columns;
  };
  const dataTable = _.cloneDeep(tableData);
  const pipeline = useTablePipeline({ components: {} }).input({
    dataSource: dataTable,
    columns: getColumns(tableHeader),
  });
  pipeline.appendRowPropsGetter((_row): any => {
    const color = _row.title === selectItem?.title ? '#21323E' : 'var(--bg-main)';
    return {
      style: { '--bgcolor': color, '--hover-bgcolor': color },
    };
  });
  return (
    <div className={styles.outside}>
      <AntdBaseTable
        className={['bordered', `${styles.custor}`].join(' ')}
        style={{
          '--line-height': '1',
          // '--header-bgcolor': '#383C3E',
          // '--header-color': 'white',
          '--row-height': '21px',
          '--header-row-height': '28px',
          '--bgcolor': 'var(--bg-main)',
          // '--color': '#D3D4D4',
          '--cell-padding': '3px 0 4px 0',
          '--hover-bgcolor': 'var(--bg-main)',
        }}
        {...pipeline.getProps()}
        defaultColumnWidth={81}
        useVirtual={{ horizontal: true, vertical: true, header: false }}
      />
    </div>
  );
};

export default BaseTable;
